<template>
  <div class="returnFee">
    <div class="box-shadow content">
      <div class="total text-center">南京华宝</div>
      <div class="moeny text-center">+<span class="text-lg">5000</span>元</div>
      <div class="detailed">
        <div class="detailed-content">
          <div class="list">
            <div class="fl text-gray">
              工资月份:
            </div>
            <div class="fr">
              <div class="text-lightGray">201808</div>
            </div>
          </div>
          <div class="list">
            <div class="fl text-gray">
              出勤天数:
            </div>
            <div class="fr">
              <div class="text-lightGray">28天</div>
            </div>
          </div>
          <div class="list">
            <div class="fl text-gray">
              出勤总工时:
            </div>
            <div class="fr">
              <div class="text-lightGray">260时</div>
            </div>
          </div>
          <div class="list">
            <div class="fl text-gray">
              饭补:
            </div>
            <div class="fr">
              <div class="text-lightGray">300元</div>
            </div>
          </div>
          <div class="list">
            <div class="fl text-gray">
              扣数:
            </div>
            <div class="fr">
              <div class="text-lightGray">0元</div>
            </div>
          </div>
          <div class="list">
            <div class="fl text-gray">
              合集工资:
            </div>
            <div class="fr">
              <div class="text-lightGray">5050元</div>
            </div>
          </div>
          <div class="list">
            <div class="fl text-gray">
              个税:
            </div>
            <div class="fr">
              <div class="text-lightGray">0元</div>
            </div>
          </div>
          <div class="list">
            <div class="fl text-gray">
              实发工资:
            </div>
            <div class="fr">
              <div class="text-lightGray">5000元</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'returnFee',
    data () {
      return {
        msg: 'returnFee'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.returnFee{
  position: fixed;
  background: #f5f5f5;
  height: 100%;
  width: 100%;
}
.banner{
  background: url("/static/wechat/images/centerBg@2x.png");
  background-size: 100%;
}
.returnFee .total{
  font-size: 20px;
  padding: 6% 0 1% 0;
}
.moeny{
  font-size: 14px;
  color: #ff664d;
  padding: 1% 0 6% 0;
}
.moeny span{
 font-size: 28px;
}
.detailed .list .fl{
  line-height: normal;
}
.detailed-content .list{
  padding: 2% 5%;
  border-bottom: none; 
  font-size: 16px;
}
.detailed-content{
 padding: 5% 0;
 background: #fff;
 border-top: 1px solid #e8e8e8;
}
</style>